<!-- 生成课件页面 -->
<template>
  <div class="pages">
    <headerTitle :navTitle="'课件与视频>生成课件'"></headerTitle>
    <div class="pages-content">
      <div class="pages-temp">
        <div class="temp-title">
          <div class="title-line"></div>
          PPT模板
        </div>
        <div class="temp-content">
          <div class="temp-content-title">请选择PPT模板</div>
          <div class="temp-content-select">
            <el-select
              v-model="value"
              placeholder="选择模板"
              size="small"
              style="width: 240px"
              @change="selectChange"
            >
              <el-option
                v-for="item in options"
                :key="item.templateName"
                :label="item.templateName"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="temp-content-img">
            <div class="temp-look">模板预览</div>
            <div class="temp-img">
              <img src="" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="pages-outline">
        <div class="temp-title">
          <div class="title-line"></div>
          PPT大纲
        </div>
        <div class="outline-content">
          <el-input
            v-model="outlineContent"
            style="width: 100%; height: calc(100vh - 260px)"
            :rows="2"
            type="textarea"
            placeholder="PPT大纲大纲内容"
          />
        </div>
      </div>
      <div class="pages-info">
        <div class="temp-title">
          <div class="title-line"></div>
          PPT模板
        </div>
        <div class="line-content">
          <div class="temp-content-title">课程名称</div>
          <div class="temp-content-select">
            <el-input
              v-model="courseName"
              style="width: 100%"
              placeholder="请输入课程名称"
            />
          </div>
          <div class="info-desc between-content">
            <div class="">课程简单描述</div>
            <div class="temp-content-select">
              (用于检索课程背景知识，不错超过100字)
            </div>
          </div>
          <div style="margin-bottom: 20px">
            <el-input
              v-model="courseDescription"
              style="width: 100%"
              :rows="2"
              type="textarea"
              maxlength="100"
              placeholder="请输入课程简单描述"
            />
          </div>
          <div class="line-slider">
            <div class="slider-title between-content">
              <div class="slider-desc">课程单元数量</div>
              <div class="slider-num">{{ numberOfUnits }}</div>
            </div>
            <div>
              <div>
                <el-slider v-model="numberOfUnits" />
              </div>
            </div>
          </div>
          <div class="line-slider">
            <div class="slider-title between-content">
              <div class="slider-desc">单元页面数量</div>
              <div class="slider-num">{{ numberOfPagesPerUnit }}</div>
            </div>
            <div>
              <div>
                <el-slider v-model="numberOfPagesPerUnit" />
              </div>
            </div>
          </div>
        </div>
        <div class="temp-tab" v-if="false">
          <div class="tab-list">
            <div
              v-for="(item, index) in tabList"
              :key="index"
              class="tab-item direction-conter"
              :class="{ active: tabIndex == item.key }"
              @click="tabFn(item)"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
        <div class="tab-content" v-if="false"></div>
      </div>
    </div>
    <div class="btn-list">
      <div class="page-title" @click="submit">生成大纲</div>
      <div class="page-title" @click="submit">生成PPT</div>
    </div>
  </div>
</template>

<script setup>
import headerTitle from "@/components/headerTitle.vue";
import { ref, reactive, toRefs } from "vue";
import { pptList } from "@/request/api";
let state = reactive({
  options: [],
  tabList: [
    {
      title: "下载课程PPT",
      key: 1,
    },
    {
      title: "下载PPT大纲",
      key: 2,
    },
    {
      title: "上传PPT大纲",
      key: 3,
    },
  ],
});
const { options, tabList } = toRefs(state);
let value = ref("");
let outlineContent = ref(""); //大纲内容
let numberOfUnits = ref(0); //课程单元数量
let numberOfPagesPerUnit = ref(0); //单元页面数量
let tabIndex = ref(1);
let courseName = ref(""); //课程名称
let courseDescription = ref(""); //课程描述
let pptTemplateId = null;
/**
 * 点击PPT模板类型
 */
function tabFn(item) {
  console.log(item, ";");
  tabIndex.value = item.key;
}

function getTempList() {
  pptList().then((res) => {
    let { data, code } = res;
    if (code == 200) {
      state.options = data.pptTemplates;
    }
    console.log(res, "res");
  });
}
getTempList();

function submit() {
  let params = {
    pptTemplateId: pptTemplateId, // 关联的 PPT 模板 ID
    outlineContent: outlineContent.value, //
    courseName: courseName.value, // 课程名称
    courseDescription: courseDescription.value, // 课程简介
    numberOfUnits: numberOfUnits.value, // 课程单元数量
    numberOfPagesPerUnit: numberOfPagesPerUnit.value,
  };
}
/**
 * 选择模板事件
 */
function selectChange(e) {
  pptTemplateId = e;
}
</script>

<style lang="less" scoped>
.active {
  background: #1e90ff !important;
  color: #fff !important;
}
:deep(.el-textarea__inner) {
  height: 100% !important;
}
.temp-title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .title-line {
    height: 18px;
    min-width: 3px;
    background: #1e90ff;
    margin-right: 10px;
  }
  color: #1e90ff;
  font-weight: bold;
}
.pages {
  padding: 20px;
  height: calc(100vh - 80px);
  box-sizing: border-box;
  overflow: auto;
  .pages-content {
    display: flex;
    align-items: flex-start;
    height: calc(100vh - 200px);
    overflow: auto;

    .pages-temp {
      flex: 1;
      margin-right: 20px;
      .temp-content {
        padding: 0 10px;
        color: #9c9c9c;
        font-size: 15px;
        .temp-content-title {
          margin-bottom: 10px;
        }
        .temp-content-select {
          margin-bottom: 20px;
        }
        .temp-content-img {
          width: 100%;
          height: calc(100vh - 330px);
          background: #e8e8e8;
          .temp-look {
            width: 100px;
            background: #1e90ff;
            color: #fff;
            padding: 5px;
          }
          .temp-img {
            margin: 20px;

            img {
              width: 100%;
            }
          }
        }
      }
    }
    .pages-outline {
      flex: 2;
      margin-right: 20px;
    }
    .pages-info {
      flex: 1.5;
      color: #9c9c9c;
      font-size: 15px;
      margin-bottom: 20px;
      .line-content {
        margin-bottom: 20px;
        .temp-content-title {
          margin-bottom: 10px;
        }
        .info-desc {
          margin: 10px 0;
        }
        .line-slider {
          .slider-title {
            .slider-num {
              padding: 5px 10px;
              border: 1px solid #ccc;
              border-radius: 5px;
              margin-left: 10px;
            }
          }
        }
      }
      .temp-tab {
        .tab-list {
          display: flex;
          align-items: center;
          div {
            color: #000;
            cursor: pointer;
          }
          .tab-item {
            padding: 5px;
            background: #e8e8e8;
          }
        }
      }
      .tab-content {
        border: 1px solid #ccc;
        height: 300px;
      }
    }
  }
  .btn-list {
    display: flex;
    align-items: center;
    justify-content: center;
    .page-title {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 15px 20px;
      background: #1e90ff;
      color: #fff;
      border-radius: 10px;
      margin: 0 50px;
    }
  }
}
</style>
